<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    class="vab-copper-dialog"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="title"
    :width="width"
  >
    <el-row type="flex" justify="center" align="middle">
      <el-col :span="24" style="height: 300px">
        <VueCropper
          ref="cropperRef"
          :auto-crop="state.options.autoCrop"
          :auto-crop-height="state.options.autoCropHeight"
          :auto-crop-width="state.options.autoCropWidth"
          :can-move="state.options.canMove"
          :can-move-box="state.options.canMoveBox"
          :center-box="state.options.centerBox"
          :fixed="state.options.fixed"
          :fixed-box="state.options.fixedBox"
          :fixed-number="state.options.fixedNumber"
          :full="state.options.full"
          :high="state.options.high"
          :img="image"
          :info="true"
          :max-img-size="state.options.max"
          mode="contain"
          :original="state.options.original"
          :output-size="state.options.size"
          :output-type="state.options.outputType"
        />
      </el-col>
    </el-row>
    <template #footer>
      <div class="vab-cropper-footer">
        <el-upload
          ref="uploadFileRef"
          :accept="state.acceptOptions"
          action=""
          list-type="picture-card"
          :before-upload="handleBeforeChange"
        >
          <template #default>
            <el-button type="success">选择图片</el-button>
          </template>
        </el-upload>
        <el-button icon="circle-close" type="warning" @click="close">
          取消
        </el-button>
        <el-button icon="circle-check" type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="PircureCropper" lang="ts">
import { useMessage } from "@/hooks/message";
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
import defaultImg from "/public/images/cropper/empty.png";

const props = defineProps({
  title: {
    type: String,
    default: "图片裁剪"
  },
  size: {
    type: Number,
    default: 2
  },
  width: {
    type: String,
    default: "30%"
  },
  model: {
    type: Boolean,
    default: true
  },
  accept: {
    type: Array,
    default: function () {
      return [".jpg", ".png", ".tif", ".gif", ".jpeg"];
    }
  }
});
const emits = defineEmits(["confirm"]);

const cropperRef = ref(null);
const uploadFileRef = ref(null);
const image = ref();

const state = reactive({
  dialogVisible: false,
  acceptOptions: props.accept.join(","),
  options: {
    size: 1,
    full: true,
    outputType: "png",
    canMove: false,
    fixedBox: false,
    original: false,
    canMoveBox: true,
    autoCrop: true,
    autoCropWidth: 300,
    autoCropHeight: 210,
    centerBox: true,
    high: true,
    max: 1000,
    fixed: false,
    fixedNumber: [2, 1.5]
  }
});

const show = () => {
  image.value = defaultImg;
  state.dialogVisible = true;
};

const close = () => {
  state.dialogVisible = false;
};

const save = () => {
  cropperRef.value.getCropData(data => {
    emits("confirm", data);
  });
  close();
};

const handleBeforeChange = async file => {
  if (file.size > 1048576 * props.size) {
    useMessage().warning(`上传文件大小不能超过${props.size}MB!`);
  }
  const fileNameArray = file.name.split(".");
  const fileType = `.${fileNameArray[fileNameArray.length - 1]}`;
  if (props.accept.indexOf(fileType.toLowerCase()) === -1) {
    useMessage().warning(`请选择合适的文件!`);
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = e => {
    image.value = e.target?.result;
  };
  return false;
};

defineExpose({
  close,
  show,
  save
});
</script>
<style lang="scss">
.vab-copper-dialog {
  .el-dialog__footer {
    .el-button {
      margin-left: 10px;
    }

    &:before {
      display: block;
      clear: both;
      content: "";
    }

    > .vab-cropper-footer {
      > div {
        display: inline;

        .el-upload-list__item {
          display: none;
        }

        .el-upload--picture-card {
          float: right;
          width: auto;
          height: $base-input-height;
          line-height: $base-input-height;
          vertical-align: middle;
          background-color: transparent;
          border: 0;
          border-radius: 0;
        }
      }
    }
  }
}
</style>
